<template>
  <el-form
    class="form"
    ref="form"
    :rules="rules"
    :model="form"
    label-width="80px"
  >
    <el-form-item label="标题" prop="title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="作者" prop="author">
      <el-input v-model="form.author"></el-input>
    </el-form-item>

    <el-form-item label="文章类型" prop="category_name">
      <el-radio-group v-model="form.category_name">
        <el-radio label="webgis"></el-radio>
        <el-radio label="倾斜摄影"></el-radio>
        <el-radio label="数据处理"></el-radio>
      </el-radio-group>
    </el-form-item>
    <quill-editor
      ref="myQuillEditor"
      :options="editorOption"
      v-model="form.content"
      prop="content"
    >
    </quill-editor>

    <el-form-item class="btn">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import '../../../node_modules/quill/dist/quill.core.css';
import '../../../node_modules/quill/dist/quill.snow.css';
import '../../../node_modules/quill/dist/quill.bubble.css';
//调用富文本编辑器
import { quillEditor } from '../../../node_modules/vue-quill-editor';

export default {
  name: 'update',

  components: {
    quillEditor,
  },

  data() {
    return {
      id: this.$route.params.id,
      form: {
        title: '',
        author: '',
        category_name: '',
        content: '',

        delivery: false,
        type: [],

        desc: '',
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', tigger: 'blur' }],
        author: [{ required: true, message: '作者不能为空', tigger: 'blur' }],
        category_name: [
          { required: true, message: '分类不能为空', tigger: 'blur' },
        ],
      },
      editorOption: {
        placeholder: '请在这里输入内容',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: 'ordered' }, { list: 'bullet' }], //列表
              [{ script: 'sub' }, { script: 'super' }], // 上下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ direction: 'rtl' }], // 文本方向
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ font: [] }], //字体
              [{ align: [] }], //对齐方式
              ['clean'], //清除字体样式
              ['link', 'image'], //上传图片、上传视频   "link" 链接  "video" 视频
            ],
          },
        },
      },
    };
  },

  created() {
    this.getblog();
  },
  methods: {
    onSubmit() {
      const id = this.$route.query.id;
      console.log(id);
      this.$http.put(`/blogs/${id}`, this.form).then((data) => {
        const { code, message, result } = data;
        if (code == 0) {
          //提示新增成功
          this.$message.success(message);
          //清空表单数据
          this.$refs['form'].resetFields();
          this.$router.push({
            path: `/category`,
          });
        }
      });
    },

    getblog() {
      const id = this.$route.query.id;
      console.log(id);
      this.$http.get(`/blogs/${id}`).then((data) => {
        this.form = data.result;
        // console.log(blog);
      });
    },
  },
};
</script>

<style>
.quill-editor {
  /* width: 1000px; */
  margin: 0 auto;
  /* height: 150px; */
}
.editor {
  line-height: normal !important;
  height: 800px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}

.form {
  width: 1000px;
  /* height: 50px; */
  /* background-color: skyblue; */
  margin: auto;
}
.form .btn {
  margin: 10px;
  /* background-color: skyblue; */
  align-items: center;
  text-align: right;
}
</style>
